<template>
  <div class="container">
    <el-card class="box-card">
      <!-- 搜索组件 -->
      <questionsSearch :simple="simple" @search="search" />
      <!-- 标签页 -->
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane label="全部" name="-1" />
        <el-tab-pane label="待审核" name="0" />
        <el-tab-pane label="已审核" name="1" />
        <el-tab-pane label="已拒绝" name="2" />
      </el-tabs>
      <!-- 提示 -->
      <el-alert
        type="info"
        show-icon
        :closable="false"
      >
        {{ '数据一共' + total + '条' }}
      </el-alert>
      <br>
      <!-- 表格 -->
      <el-table
        :data="choiceList"
        border
        style="width: 100%"
      >
        <el-table-column
          prop="number"
          label="试题编号"
          width="120"
        />
        <el-table-column
          prop="subject"
          label="学科"
          width="120"
        />
        <el-table-column
          prop="catalog"
          label="目录"
          width="120"
        />
        <el-table-column
          label="题型"
          width="120"
        >
          <template slot-scope="scope">
            {{ questionType(scope.row.questionType) }}
          </template>
        </el-table-column>
        <el-table-column
          label="题干"
          width="280"
        >
          <template slot-scope="scope">
            <div v-html="scope.row.question" />
          </template>
        </el-table-column>
        <el-table-column
          label="录入时间"
          width="180"
        >
          <template slot-scope="scope">
            {{ newDate(scope.row.addDate) }}
          </template>
        </el-table-column>
        <el-table-column
          label="难度"
          width="80"
        >
          <template slot-scope="scope">
            {{ difficulty(scope.row.difficulty) }}
          </template>
        </el-table-column>
        <el-table-column
          prop="creator"
          label="录入人"
          width="120"
        />
        <el-table-column
          label="审核状态"
          width="120"
        >
          <template slot-scope="scope">
            {{ chkState(scope.row.chkState) }}
          </template>
        </el-table-column>
        <el-table-column
          prop="chkRemarks"
          label="审核意见"
          width="150"
        />
        <el-table-column
          prop="chkUser"
          label="审核人"
          width="120"
        />
        <el-table-column
          label="发布状态"
          width="150"
        >
          <template slot-scope="scope">
            {{ publishState(scope.row.publishState) }}
          </template>
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          width="200"
        >
          <template slot-scope="{row}">
            <el-button type="text" size="small" @click="browse(row)">浏览</el-button>
            <el-button type="text" size="small" :disabled="row.chkState!==0" @click="dialogVisible=true;chkArr.id=row.id">审核</el-button>
            <el-button type="text" size="small" @click="hEdit(row.id)">修改</el-button>
            <el-button type="text" size="small" @click="choiceAdd(row)">{{ row.publishState ? '下架' : '上架' }}</el-button>
            <el-button type="text" size="small" @click="hDel(row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <div class="page">
        <el-pagination
          background
          :current-page="listPromise.page"
          :page-sizes="[1,5,10,20]"
          :page-size="listPromise.pagesize"
          layout=" prev, pager, next, sizes,jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>
    <!-- 弹窗 -->
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="20%"
    >
      <el-radio-group v-model="chkArr.chkState">
        <el-radio :label="1">通过</el-radio>
        <el-radio :label="2">不通过</el-radio>
      </el-radio-group>
      <br>
      <br>
      <el-input
        v-model="chkArr.chkRemarks"
        type="textarea"
        :rows="2"
        placeholder="请输入审核意见"
      />
      <br><br>
      <div class="btn">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="hSubmit">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 预览组件  -->
    <el-dialog
      title="题目预览"
      :visible.sync="showDialog"
      width="65%"
    >
      <questionsDialog v-if="showDialog" :cur-id="browseObj.curId" :question-type-list="browseObj.questionTypeList" :question-difficulty-type-list="browseObj.questionDifficultyTypeList" />
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="showDialog = false">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import questionsDialog from './questions-randoms-dialog/questionsDialog.vue'
import questionsSearch from '../components/questions-search.vue' // 搜索部分组件
import { choice, choiceCheck, choicePublish, remove } from '@/api/hmmm/questions.js' //  API
import { questionType, difficulty, publishType, chkType } from '@/api/hmmm/constants.js' // 枚举
import { parseTime } from '@/utils/index.js' // 解析时间
import { simple } from '@/api/hmmm/subjects.js'
export default {
  components: {
    questionsSearch,
    questionsDialog
  },
  data() {
    return {
      choiceList: [], // 精选题库列表
      listPromise: {
        page: 1, // 当前页数
        pagesize: 5, // 一页多少条
        chkState: null
      },
      chkArr: {
        id: '',
        chkState: 1,
        chkRemarks: ''
      },
      activeName: '-1', // tab标签页
      simple: [], // 学科
      total: 0, // 多少条数据
      dialogVisible: false, // 弹出框
      showDialog: false, // 浏览弹窗
      browseObj: {
        curId: '',
        questionTypeList: {}, // 保存处理后的问题类型
        questionDifficultyTypeList: {} // 保存处理后的问题难度
      }
    }
  },
  created() {
    this.loadSimple()
    this.loadList() // 获取精选题库列表
  },
  methods: {
    enumerate(value, arr) {
      return arr.find(item => {
        return item.value === Number(value)
      }).label
    }, // 封装枚举函数
    async loadRemove(id) {
      const res = await remove({ id })
      console.log(res)
      if (res.status) {
        if (this.choiceList.length <= 1 && this.listPromise.page !== 1) {
          this.listPromise.page
          this.listPromise.page--
          console.log(this.listPromise.page)
        }
        this.loadList()
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      } else {
        this.$message({
          type: 'error',
          message: '删除失败!'
        })
      }
    }, // 删除
    async loadList() {
      const res = await choice(this.listPromise)
      this.choiceList = res.data.items
      this.total = res.data.counts
    }, // 获取精选题库列表
    async loadChoiceCheck() {
      const res = await choiceCheck(this.chkArr)
      if (res.data.success) {
        this.$message.success('操作完成！！')
        this.dialogVisible = false // 弹出框
      }
    }, // 审核
    async loadChoice(row) {
      const publishState = row.publishState ? 0 : 1
      console.log(row.id)
      const res = await choicePublish({ id: row.id, publishState })
      console.log(res)
      if (res.data.success) {
        if (publishState) {
          this.$message.success('上架成功！')
        } else {
          this.$message.success('下架成功！')
        }
        this.loadList()
      }
    }, // 下架精选
    async loadSimple() {
      const res = await simple()
      this.simple = res.data
    }, // 获取简单学科
    newDate(data) {
      return parseTime(data)
    }, // 解析时间
    questionType(val) {
      return this.enumerate(val, questionType)
    }, // 利用枚举处理题形
    difficulty(val) {
      return this.enumerate(val, difficulty)
    }, // 利用枚举处理难度
    chkState(val) {
      return this.enumerate(val, chkType)
    }, // 利用枚举审核状态
    publishState(val) {
      if (Number(val) !== 0 && Number(val) !== 1) {
        val = 3
      }
      return this.enumerate(val, publishType)
    }, // 利用枚举处理发布状态
    handleSizeChange(val) {
      this.listPromise.pagesize = val
      this.loadList()
    }, // 每页 多少 条
    handleCurrentChange(val) {
      this.listPromise.page = val
      this.loadList()
    }, // 当前页
    search(from) {
      this.listPromise = { page: this.listPromise.page, pagesize: this.listPromise.pagesize, chKState: this.listPromise.chKState, ...from }
      this.loadList()
    }, // 搜索
    handleClick() {
      if (this.activeName !== '-1') {
        this.listPromise.chkState = Number(this.activeName)
        this.loadList()
        return
      }
      this.listPromise.chkState = null
      this.loadList()
    }, // tab切换
    hSubmit() {
      if (this.chkArr.chkRemarks === '') {
        this.$message({
          message: '请输入审核意见',
          type: 'warning'
        })
        return
      }
      this.loadChoiceCheck()
      this.loadList()
    }, // 审核提交
    hEdit(id) {
      this.$router.push({
        path: '/questions/new',
        query: {
          id
        }
      })
    }, // 编辑
    choiceAdd(row) {
      // this.btnBlur(evt)
      // 敲黑板上面三行是为了让按钮失去焦点点击后不在高亮

      this.$confirm(`此操作将${row.publishState ? '下架' : '上架'}该题目精选, 是否继续?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        iconClass: 'el-icon-info',
        type: 'warning'
      }).then(() => {
        this.loadChoice(row)
        // this.btnBlur(evt)
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        })
        // this.btnBlur(evt)
      })
    }, // 添加精选
    hDel(id) {
      this.$confirm('此操作将永久删除该题目, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.loadRemove(id)
        // this.btnBlur(evt)
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        })
      })
    }, // 删除
    browse(row) {
      this.showDialog = true
      console.log(row.id)
      this.browseObj.curId = row.id
      this.browseObj.questionTypeList[row.questionType] = this.questionType(row.questionType)
      this.browseObj.questionDifficultyTypeList[row.difficulty] = this.difficulty(row.difficulty)
    }
  }
}
</script>

<style scoped lang='scss'>
  .page {
    text-align: right;
  }
  .btn {
    text-align: right;
  }
  ::v-deep .el-dialog__footer{
     text-align:right;
  }
</style>
